<template>
  <div>
    <el-dialog
      title="选择物料"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      width="1200px">
      <!-- <el-tag
        v-for="tag in planMonthsArr"
        :key="tag"
        closable
        @close="removeSelectedMonth(tag)"
        :type="tag">
        {{tag}}
      </el-tag> -->
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <!-- <el-form-item label="计划月份"  >
          <el-date-picker
            v-model="queryParams.planMonth"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            size="small"
            @change="search"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="物料名称" >
          <el-input
            v-model="queryParams.mName"
            placeholder="请输入物料名称"
            clearable
            size="mini"
          />
        </el-form-item>
        <el-form-item label="物料编码" >
          <el-input
            v-model="queryParams.mNo"
            placeholder="请输入物料编码"
            clearable
            size="mini"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="search">查询</el-button>
          <el-button type="primary"  size="mini" @click="determine">确定</el-button>
        </el-form-item>
      </el-form>
      <el-table  :data="chanpinList" stripe
                 @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
         <el-table-column align="center" property='depOffName' label="科室"    />
        <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="物料名称"  property="mname"  ></el-table-column>
        <el-table-column align="center" label="物料规格"  property="mmodel"  ></el-table-column>
        <el-table-column align="center" label="单位"  property="unit"  ></el-table-column>
        <el-table-column align="center" label="计划价"  property="planPrice"  ></el-table-column>
        <!-- <el-table-column align="center" label="未入库数量"  property="storageNum"  ></el-table-column>
        <el-table-column align="center" label="用途"  property="useing"  ></el-table-column>
        <el-table-column align="center" label="备注"  property="note"  ></el-table-column> -->
      </el-table>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="search"
      />
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    props: ['addProductData'],
    name: "Role",
    data() {
      return {
        total:0,
        queryParamsb: {},
        name:'新增需求计划',
        //物料科室数据
        wlksList:[
          {value:'1',label:'科室1'},
          {value:'2',label:'科室2'},
        ],
        //资金来源
        zjlyList:[
          {value:'1',label:'来源1'},
          {value:'2',label:'来源2'},
        ],


        loading:false,
        dialogTableVisible:true,
        //产品查询数据
        // queryParams:{
        //   pageNum: 1,
        //   pageSize: 10,
        //   mNo: '',
        //   mName: '',
        //   planMonths:'',
        //   planMonth:'',
        // },
          // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          mNo: '',
          mName: '',
          mtype: '',
          typeId:'',
          depOffId:'',
          purchasingMethod:'',
        },
        planMonthsArr:[],
        //类型数据
        optionsLX:[
          {value:'1',label:'根据计划'},
          {value:'2',label:'根据库存'},
        ],
        newxuanz:[],//当前选中的
        deptOptions:[],//树形图数据
        defaultProps: {
          children: "children",
          label: "label"
        },
        //产品列表数据
        chanpinList:[],
        //选中
        addList:[]

      };
    },
    components:{

    },
    watch: {
      dialogTableVisible: function () {
        this.dialogTableVisible = true;//始终让他为true;
        this.cancel();//隐藏
      },
    },
    created() {
      var myDate = new Date();
      var pp =myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
      if(pp<9){
        pp = "0"+pp
      }
      this.queryParams.planMonth = myDate.getFullYear()+'-'+pp;
      this.search()
    },
    methods: {
      removeSelectedMonth: function(month){
        if (this.queryParams.planMonth === month) {
          this.$message.info("不能移除当前选择的月份");
          return;
        }
        this.planMonthsArr.splice(this.planMonthsArr.indexOf(month), 1);
        this.search();
      },
      //查询
      search:function(){
        this.loading = true;
        if(!this.queryParams.planMonth || this.queryParams.planMonth === ''){
          this.planMonthsArr = [];
        } else {
          if(!this.planMonthsArr.find(month => month === this.queryParams.planMonth)){
            this.planMonthsArr.push(this.queryParams.planMonth);
          }
        }


        this.queryParams.planMonths = this.planMonthsArr.join(",");

        var queryParams = new Object();
        Object.keys(this.queryParams)
          .forEach(k=> queryParams[k] = this.queryParams[k]);
          queryParams.planMonth = null;

        request({
          url: '/material/supplies/list',
          method: 'get',
          params:queryParams
        }).then(response => {
          this.loading = false
          this.chanpinList = response.rows
          this.total = response.total

        });
      },
      //表格复选框监听
      handleSelectionChange:function(row){
        this.addList = row
      },
      handleDelete:function(row){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.shanchu(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      shanchu:function(row){
        console.log(row)
        this.addList.splice(row,1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      },
      //物料添加
      wlAdd:function(row){
        console.log('物料添加',row)
        debugger
        if(this.addList.length!=0){
          //判断不可用重复添加
          for(var i=0;i<this.addList.length;i++){
            if(this.addList[i].id==row.id){
              this.$message({
                type: 'info',
                message: '已经存在'
              });
              return
            }
          }
          this.addList.push(row)
        }else {
          this.addList.push(row)
        }
      },
      //确定
      determine:function(){
        this.$emit('addProductBack',this.addList)//将submitModel的值传给父组件
      },
      //隐藏
      cancel:function(){
        this.determine()

      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
        this.newxuanz = val
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

    }
  };
</script>
<style >





</style>